$(function(){
	
	// original field values
	
	var field_values = {
		
		// id:value
		'username'	:	'username',
		'password'	:	'password',
		'cpassword'	:	'password',
		'firstname'	:	'First Name',
		'lastname'	:	'Last Name',
		'email'		:	'Email'
		
	};
	
	// input focus
	$('input#username').inputfocus({value:field_values['username']});
	$('input#password').inputfocus({value:field_values['password']});
	$('input#cpassword').inputfocus({value:field_values['cpassword']});
	$('input#firstname').inputfocus({value:field_values['firstname']});
	$('input#lastname').inputfocus({value:field_values['lastname']});
	$('input#email').inputfocus({values:field_values['email']});
	
	// recet progress bar
	$('#progress').css('width', '0px');
	$('#progress_text').html('0% Complete');
	
	
	$('#submit_first').click(function(){
		
		// remove class
		$('#first_step input').removeClass('error').removeClass('valid');
		
		// check if inputs are not empty
		var fields = $('#first_step input[type=text], #first_step input[type=password]')
		var error = 0;
		
		fields.each(function(){
			
			var value = $(this).val();
			
			if(value.length < 4 || value == field_values[$(this).attr('id')]){
				$(this).addClass('error');
				$(this).effect("shake", {times:3},50);
				
				error++;
			}
			else{
				$(this).addClass('valid');
			}
			
		});
		
		if(!error){
			if($('#password').val() != $('#cpassword').val()){
				$('#first_step input[type=password]').each(function(){
					$(this).removeClass('valid').addClass('error');
					$(this).effects("shake", {times:3}, 50);
				});
				
				return false;
			}
			else {
				// update progress bar
				$('#progress_text').html('33% completed');
				$('#progress').css('width', '113px');
				
				// slides change
				$('#first_step').slideUp();
				$('#second_step').slideDown();
			}			
		}
		else {
			return false;
		}
		return false;
	});
	
	$('#submit_second').click(function(){
				
		// remove class
		$('#second_step input').removeClass('error').removeClass('valid');
		
		var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
		var fields = $('#second_step input[type=text]');
		var error = 0;
		
		fields.each(function(){
			
			var value = $(this).val();
			
			if(value.length < 1 || value == field_values[$(this).attr('id')] || ($(this).attr('id') == 'email' && !emailPattern.test(value))){
				$(this).addClass('error');
				$(this).effect("shake", {times:3}, 50);
				
				error++;
			}
			else{
				$(this).addClass('valid');
			}			
		});
		
		if(!error){
			// update progress bar
			$('#progress_text').html('66% completed');
			$('#progress').css('width', '226px');
			
			// slides change
			$('#second_step').slideUp();
			$('#third_step').slideDown();
		}
		else{
			return false;
		}
		return false;
		
	});
	
	$('#submit_third').click(function(){
		
		// update progress bar
		$('#progress_text').html('100% completed');
		$('#progress').css('width', '339px');
		
		// prepare the fourth step
		var fields = new Array(
			$('#username').val(),
			$('#password').val(),
			$('#email').val(),
			$('#firstname').val() + ' ' + $('#lastname').val(),
			$('#age').val(),
			$('#gender').val(),
			$('#country').val()
		);
		//var allfield_values = $('#username').val()+'#'+$('#password').val();
		var tr = $('#fourth_step tr');
		
		//$('#hid_allvalues').val(allfield_values);
		
		tr.each(function(){
			
			// alert (fields[$(this).index()])
			$(this).children('td:nth-child(2)').html(fields[$(this).index()]);
		});
		
		// slide change
		$('#third_step').slideUp();
		$('#fourth_step').slideDown();
		
		return false;
	});
	
	
	$('#submit_fourth').click(function(){
		   $('#myform').submit();
		   return true;
		});
	
	
	$('#fourth_step').click(function(){
		//alert('Data Sent');
	});
	
	
	//back button
    $('.back').click(function(){
        var container = $(this).parent('div'),
            previous  = container.prev();

        switch(previous.attr('id')) {
            case 'first_step' : $('#progress_text').html('0% Complete');
                                 $('#progress').css('width','0px');
                                 break;
            case 'second_step': $('#progress_text').html('33% Complete');
                                 $('#progress').css('width','113px');
                                 break;
            
            case 'third_step' : $('#progress_text').html('66% Complete');
                                 $('#progress').css('width','226px');
                                 break;
            
            default: break;
        }
            
        $(container).slideUp();
        $(previous).slideDown();
    });
	
});